<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<input type="text" name="account" id="in_account" placeholder="请输入账号" />
			<input type="password" name="password" id="in_password" placeholder="请输入密码" />
			<button type="button" onclick="click1()">提交</button>
		</form>
		<script type="text/javascript">
			/*
				dom对象
					document对象就是html文档对象，表示的就是当前操作的html文档
						常用方法
							获取元素的方法
								getElementById(id)：根据id获取元素，只会获取一个元素
								getElementsByClassName(class)：根据class属性获取元素数组
								getElementsByName()：根据name属性获取元素数组
								getElementsByTagName()：根据标签名称获取元素数组
								getElementsByTagNameNS()：基本不用，了解一下就可以了
			*/
			let in_account = document.getElementById("in_account");
			let in_password = document.getElementsByName("password")[0];
			in_account.placeholder = "这是js修改过的";

			function click1() {
				let account = in_account.value; //获取input标签的value属性值
				// in_account.style.width = "300px";
				if (account.trim().length === 0) {
					alert("请输入账号");
					return; //提前中止函数
				}

				let password = in_password.value;
				if (password.trim().length === 0) {
					alert("请输入密码");
					return; //提前中止函数
				}
				console.log(account, password);
			}
			//做一个表单，里面有两个输入框，一个输入账号，一个输入密码，还有一个登录按钮，
			//当输入框中的内容没有输入时，点击登录按钮，提示，账号为空，如果有账号则提示密码为空
			//都有输入时，则将输入的账号密码打印
		</script>
	</body>
</html>
